<template>
  <a-modal
    :title="title"
    :width="1200"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <div>
      <a-form layout="inline">
        <a-row :gutter="24">
          <a-col :span="6">
            <a-form-item label="账号">
              <a-input
                placeholder="请输入账号"
                v-model="queryParams.userName"
              ></a-input>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="性别">
              <a-select
                style="width: 150px;"
                v-model="queryParams.gender"
                placeholder="请选择性别"
              >
                <a-select-option value="">请选择性别</a-select-option>
                <a-select-option value="0">男</a-select-option>
                <a-select-option value="1">女</a-select-option>
                <a-select-option value="2">保密</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <a-form-item label="状态">
              <a-select
                style="width: 150px;"
                v-model="queryParams.locked"
                placeholder="请选择状态"
              >
                <a-select-option value="">请选择状态</a-select-option>
                <a-select-option value="0">正常</a-select-option>
                <a-select-option value="1">锁定</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>

          <a-col :span="6">
            <span
              style="float: left;overflow: hidden;"
              class="table-page-search-submitButtons"
            >
              <a-button type="primary" @click="searchByQuery" icon="search"
                >查询</a-button
              >
              <a-button
                type="primary"
                @click="searchReset"
                icon="reload"
                style="margin-left: 8px"
                >重置</a-button
              >
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <a-table
      ref="TableInfo"
      bordered
      :rowKey="record => record.userId"
      :columns="columns"
      :dataSource="dataSource"
      :pagination="pagination"
      :rowSelection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange
      }"
      @change="handleTableChange"
    >
    </a-table>
  </a-modal>
</template>

<script>
import { filterObj } from "../../../utils/util";
export default {
  name: "SelectUserListModal",
  components: {},
  data() {
    return {
      title: "选择用户",
      queryParams: {},
      filteredInfo: null,
      sortedInfo: null,
      paginationInfo: null,
      dataSource: [],
      pagination: {
        pageSizeOptions: ["10", "20", "30", "40", "100"],
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) =>
          `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      },
      selectedRowKeys: [],
      selectionRows: [],
      visible: false,
      columns: [
        {
          title: "用户账号",
          align: "center",
          dataIndex: "userName",
          fixed: "left",
          width: 200
        },
        {
          title: "性别",
          align: "center",
          dataIndex: "gender",
          customRender: function(text) {
            if (text === "0") {
              return "男";
            } else if (text === "1") {
              return "女";
            } else if (text === "2") {
              return "保密";
            } else {
              return text;
            }
          }
        },
        {
          title: "手机号码",
          align: "center",
          dataIndex: "mobile"
        },
        {
          title: "邮箱",
          align: "center",
          dataIndex: "email"
        },
        {
          title: "状态",
          align: "center",
          dataIndex: "locked",
          customRender: text => {
            switch (text) {
              case "0":
                return "正常";
              case "1":
                return "锁定";
              default:
                return text;
            }
          }
        }
      ]
    };
  },
  created() {
    this.loadData();
  },
  methods: {
    add(selectUser, userIds) {
      this.visible = true;
      this.edit(selectUser, userIds);
    },
    edit(selectUser, userIds) {
      //控制台报错
      if (userIds && userIds.length > 0) {
        this.selectedRowKeys = userIds.split(",");
      } else {
        this.selectedRowKeys = [];
      }
      if (!selectUser) {
        this.selectionRows = [];
      } else {
        const that = this;
        that.selectionRows = [];
        selectUser.forEach(function(record, index) {
          that.selectionRows.push({
            userId: that.selectedRowKeys[index],
            userName: record.label
          });
        });
      }
    },
    loadData(arg) {
      if (arg === 1) {
        this.pagination.current = 1;
      }
      let params = this.getQueryParams();
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current;
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize;
        params.pageSize = this.paginationInfo.pageSize;
        params.pageNum = this.paginationInfo.current;
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize;
        params.pageNum = this.pagination.defaultCurrent;
      }
      this.$get("/api/user", { ...params }).then(r => {
        if (r.data.success) {
          let data = r.data.data;
          const pagination = { ...this.pagination };
          pagination.total = data.total;
          this.dataSource = data.rows;
          this.pagination = pagination;
        }
      });
    },
    getQueryParams() {
      let param = Object.assign({}, this.queryParams);
      param.field = this.getQueryField();
      return filterObj(param);
    },
    getQueryField() {
      let str = "userId";
      for (let a = 0; a < this.columns.length; a++) {
        str += "," + this.columns[a].dataIndex;
      }
      return str;
    },
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys;
      const that = this;
      that.selectionRows = [];
      selectedRows.forEach(function(obj) {
        that.selectionRows.push(obj);
      });
    },
    searchReset() {
      let that = this;
      Object.keys(that.queryParams).forEach(function(key) {
        that.queryParams[key] = "";
      });
      that.loadData(1);
    },
    handleTableChange(pagination, filters, sorter) {
      this.paginationInfo = pagination;
      this.filteredInfo = filters;
      this.sortedInfo = sorter;

      this.userInfo.visiable = false;
      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...this.queryParams,
        ...filters
      });
    },
    handleCancel() {
      this.selectionRows = [];
      this.selectedRowKeys = [];
      this.visible = false;
    },
    handleOk() {
      this.$emit("choseUser", this.selectionRows);
      this.handleCancel();
    },
    searchByQuery() {
      this.loadData(1);
    }
  }
};
</script>
<style scoped>
.ant-table-tbody .ant-table-row td {
  padding-top: 15px;
  padding-bottom: 15px;
}
.anty-row-operator button {
  margin: 0 5px;
}
.anty-img-wrap > img {
  max-height: 100%;
}
</style>
